<template>
    <!-- 引入头部组件，监听其addTodo事件（用于添加新任务） -->
    <ToDoHeader @addTodo="addTodo" />

    <!-- 引入主体组件，传递过滤后的任务列表showList，监听删除任务事件delTodo -->
    <ToDoMain :list="showList" @delTodo="delTodo"/>

    <!-- 引入底部组件，传递未完成任务数lastLength和当前状态status，监听状态更新事件 -->
    <ToDoFooter
        :lastLength="lastLength"
        :status="status"
        @updateStatus="updateStatus"
    />
</template>

<script setup >
// 导入三个子组件（局部注册，需显式导入才能使用）
import ToDoHeader from "./components/ToDoHeader.vue"; // 头部组件（输入新任务）
import ToDoMain from "./components/ToDoMain.vue";     // 主体组件（展示任务列表）
import ToDoFooter from "./components/ToDoFooter.vue"; // 底部组件（状态筛选、统计）

// 导入Vue的响应式API：
// ref用于创建响应式数据，computed用于创建计算属性（依赖其他数据动态变化）
import { ref, computed } from "vue";

// 定义任务列表的响应式数据，初始包含两条示例任务
// 每个任务对象包含：id（唯一标识）、name（任务名称）、done（完成状态，false未完成，true已完成）
const list = ref([
    {id: 1, name: '晨练', done: false },
    {id: 2, name: '练书法', done: true },
]);

// 处理添加新任务的函数（由ToDoHeader组件的addTodo事件触发）
// 参数name：新任务的名称（从头部组件传递过来）
const addTodo = name => {
    // 向任务列表添加新对象
    list.value.push({
        name: name,          // 任务名称
        done: false,         // 初始状态为未完成
        id: ~~(Math.random() * 1000)  // 生成随机id（~~用于取整）
    });
}

// 处理删除任务的函数（由ToDoMain组件的delTodo事件触发）
// 参数id：要删除的任务的唯一标识
const delTodo = id => {
    // 通过filter过滤掉id匹配的任务，实现删除效果
    list.value = list.value.filter(item => item.id !== id);
}

// 计算属性：统计未完成的任务数量（用于底部组件展示）
// 依赖list的变化，当list中的任务完成状态改变时，自动重新计算
const lastLength = computed(() =>{
    // 过滤出done为false的任务，返回其长度
    return list.value.filter(item => !item.done).length;
});

// 响应式数据：当前筛选状态（用于控制任务列表的显示范围）
// 可选值：'all'（全部）、'active'（未完成）、'completed'（已完成）
const status = ref('all')

// 计算属性：根据当前status筛选要显示的任务列表（用于传递给主体组件）
// 依赖list和status的变化，自动更新筛选结果
const showList = computed(() => {
    if (status.value === 'all') {
        // 显示全部任务
        return list.value;
    }
    if (status.value === 'active') {
        // 只显示未完成任务（done为false）
        return list.value.filter(item => !item.done);
    }
    if (status.value === 'completed') {
        // 只显示已完成任务（done为true）
        return list.value.filter(item => item.done);
    }
})

// 处理筛选状态更新的函数（由ToDoFooter组件的updateStatus事件触发）
// 参数status1：新的筛选状态（从底部组件传递过来）
const updateStatus = (status1) => {
    // 更新当前status的值，触发showList重新计算
    status.value = status1;
}
</script>